<template>
  <div class="root">
    <div class="table">
      <div class="table-tr">
          <div class="table-td">
              <div class="sub-table">
                  <div class="sub-table-tr">
                      <div class="table-th" :style="{width:(100/headers.length)+'%'}" v-for="h in headers" :key="h">{{h}}</div>
                  </div>
              </div>
          </div>
      </div>
      <div class="table-tr" v-for="(item,sindex) in data" :key="sindex + item">
          <div class="table-td">
              <div class="sub-table">
                  <div class="sub-table-tr">
                    <div class="sub-table-td" :style="{width:(100/item.length)+'%'}" v-for="(cell,cindex) in item" :key="cindex + cell">
                      <div class="sub-table" v-if="cell.length">
                        <div class="sub-table-tr" v-for="(sem,mindex) in cell" :key="sem+mindex">
                          <div class="sub-table-td">{{sem}}</div>
                        </div>
                      </div>
                      <div v-else>{{cell}}</div>
                    </div>
                  </div>
              </div>
          </div>
      </div>
    </div><!-- end table -->
  </div><!-- end root -->
</template>

<script>
export default {
  data () {
    return {
      // headers: [1, 2, 3],
      // data: [[4, [32, 12], 6], [32, 1, 32]]
    }
  },
  props: [
    'headers',
    'data'
  ]
}
</script>
<style>

</style>
